<template>
    <div id="navigation" class="zng-navigation">
        <div class="zng-navigation__content web-navigation">
            <div class="zui-layout zui-layout-row zui-layout-responsive zng-navigation__container">
                <a href="/" class="zng-navigation__logo shrink-0 web-navigation__logo">
                    <img :alt="siteConfig.siteName" :src="siteConfig.siteLogo" class="site-logo"/>
                </a>
                <div class="flex items-center" v-if="isMobileDevice===true">
                    <button type="button"
                            class="zui-button zui-button-default zui-button-small zui-button-outline zng-navigation__menu__trigger"
                            v-if="menuShow===false" @click="toggleMenu()">导航
                    </button>
                    <button type="button" @click="toggleMenu()" v-else
                            class="zui-button zui-button-default zui-button-small zui-button-outline zng-navigation__menu__trigger zng-navigation__menu__trigger--opened">
                        <i class="zui-icon zenticon zenticon-close"  style="font-size: 24px;"></i>
                    </button>
                </div>
                <template v-else >
                    <div style="display: flex;justify-content: flex-end;flex-direction: row;flex: 3;height: 68px;">
                        <ul  class="zng-navigation__menu zng-navigation__menu--horizontal" v-for="(topitem,index)  in headNav" :key="index">
                            <li class="zng-navigation__menu__item "  :class="activeMenu==topitem.id?'zng-navigation__menu__item--opened':''">
                                <nuxt-link :to="topitem.url?topitem.url:topitem.path" target="_blank" v-if="topitem.children.length===0">
                                    <button type="button" class="zng-navigation__menu__item__trigger">
                                        {{topitem.title}}
                                    </button>
                                </nuxt-link>
                                <button type="button" v-else class="zng-navigation__menu__item__trigger" @click="showTwoMenu(topitem)">
                                    {{topitem.title}}
                                </button>
                                <div class="zng-navigation__overlay zng-navigation__overlay-float" >
                                    <ul class="zng-navigation__default-menu">
                                        <li v-for="(subMenu,ink) in topitem.children" :key="ink">
                                            <a target="_blank" rel="nofollow" :href="subMenu.path?subMenu.path:subMenu.url">
                                                <span class="zng-navigation__default-item-text">{{subMenu.title}}</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <ul class="zng-navigation__user-state" >
                        <li class="zng-navigation__user-state__login" v-if="false">
                            <a target="_blank" href="/login"><span class="zng-navigation__default-item-text">登录</span></a>
                        </li>
                        <li>
                            <nuxt-link  target="_blank" to="https://console.super-aiagent.com/#/manystores/login?type=register" class="zui-button zui-button-primary zui-button-small js-free-trial">免费试用
                            </nuxt-link>
                        </li>
                    </ul>
                </template>
            </div>
        </div>
        <div  class="zng-navigation__placeholder"></div>
        <aside class="zng-navigation__overlay zng-navigation__overlay-side" v-if="menuShow===true"
               :class="'zng-navigation__overlay--opened'">
            <ul class="zng-navigation__side-menu">
                <li class="zng-navigation__side-menu__group" v-for="(topitem,index)  in headNav" :key="index" :class="'mobmenu'+topitem.id">
                    <h2 class="zng-navigation__side-menu__group-title"  @click="showTwoMenu(topitem)">
                        <span class=""> {{topitem.title}}</span>
                        <i role="img" v-if="topitem.children.length>0" aria-label="down" class="zui-icon zenticon zenticon-down"
                            style="font-size: 24px"></i>
                    </h2>
                    <ul class="zng-navigation__side-menu__group zng-navigation__side-menu__list"
                        :class="activeMenu==topitem.id?' zng-navigation__side-menu__group--active':' zng-navigation__side-menu__list--hidden'">
                        <li class="zng-navigation__side-menu__item" v-for="(subMenu,ink) in topitem.children" :key="ink">
                            <a target="_blank" rel="nofollow" :href="subMenu.path" class="">{{subMenu.title}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="fixed bottom-0 inset-x-0 z-1 pt-3 pb-safe-offset-3 bg-white border-0 border-t border-solid border-normal flex justify-center items-center">
                <button type="button"  class="reset-button w-36 h-10 flex justify-center items-center text-base font-semibold rounded-full mr-3 bg-primary !text-white">
                    登录PC后台
                </button>
                <a target="_blank"
                    href="/user/login?fromSource=SOURCE_PC"
                    class="w-36 h-10 flex justify-center items-center text-base font-semibold rounded-full !text-primary border-2 border-solid border-primary"
                >试用超算智能</a>
            </div>
        </aside>
    </div>
</template>
<script setup lang="ts">
import {isMobile} from '~/utils/common'
const isMobileDevice = ref(isMobile())
const siteConfig = useSiteConfig()
const menuShow = ref(false)
const toggleMenu = () => {
    menuShow.value = !menuShow.value
}
const scollReserveform=()=>{

}
const headNav=siteConfig.headNav
const activeMenu=ref(0)
const showTwoMenu=(menuVal:any)=>{
    if(menuVal.children.length==0){
        window.location.href=menuVal.path?menuVal.path:menuVal.url
        return false
    }
    if(menuVal.id==activeMenu.value){
        activeMenu.value=0
    }else{
        activeMenu.value=menuVal.id
    }
}
</script>
<style lang="scss" scoped>
.site-logo{
    height: 40px;
}
@media only screen and (max-width: 769px) {
    .web-navigation__logo {
        .site-logo {
            max-width: 260px;
            height: auto;
        }
    }
    .mobmenu7{
       display: none;
    }
}
</style>
